<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文字</title>
	</head>

	<body>
		<canvas id="myCanvas" width="200" height="100" style="border: solid 2px black;">
			您的浏览器不支持 HTML5 canvas标签
		</canvas>
		<script>
			var c= document.getElementById("myCanvas");
			var ctx=c.getContext("2d");
		    ctx.strokeStyle="#FF0000";
			ctx.moveTo(0,0);
			ctx.lineTo(200,100);
			ctx.stroke();
        </script>
        
		<canvas id="myCanvas1" width="130" height="100" style="border: 1px solid black;">
			您的浏览器不支持 HTML5 canvas标签
		</canvas>
		<script>
			var c = document.getElementById("myCanvas1");
			var ctx = c.getContext("2d");
			ctx.font = "20px Arial";
			ctx.fillText("welcome", 20, 50);//填充
		</script>
		
		<canvas id="myCanvas2" width="170" height="100" style="border: 1px solid black;">
			您的浏览器不支持 HTML5 canvas标签
		</canvas>
		<script>
			var c = document.getElementById("myCanvas2");
			var ctx = c.getContext("2d");
			ctx.font = "30px Arial";
			ctx.strokeText("welcome", 20, 50);//边框
		</script>
		
	</body>

</html>